<template>
  <div>toRefs的使用</div>
  <h3> name:{{ name }}</h3>
  <h3> age:{{ age }}</h3>
</template>

<script lang="ts">
import {defineComponent, reactive, toRefs} from 'vue';

const useFeatureX = () => {
  const state = reactive({
    name: 'guojq',
    age: 30
  })
  return {
    //将响应式对象转换为普通对象，其中结果对象的每个 property 都是指向原始对象相应 property 的 ref
    // 当从组合式函数返回响应式对象时，toRefs 非常有用，这样消费组件就可以在不丢失响应性的情况下对返回的对象进行解构/展开：
    ...toRefs(state)
  }
}
export default defineComponent({
  name: 'App',
  components: {},
  setup() {
    const {name, age} = useFeatureX()

    setInterval(() => {
      name.value += '#######'
    }, 1000)
    return {
      name, age
    }
  }
});
</script>

<style>

</style>

